<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" th:href="@{/y9static/y9new/css/loaders.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/y9static/y9new/css/layerMsg.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/y9static/y9new/css/verify.css}"/>
    <script type="text/javascript" th:src="@{/y9static/js/base64.js}"></script>
    <script type="text/javascript" th:src="@{/y9static/y9new/js/jquery-2.1.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/y9static/js/jquery/jquery.cookie.js}"></script>
    <script type="text/javascript" th:src="@{/y9static/y9new/js/jsencrypt.min.js}"></script>
    <link rel="icon" href="/yun.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>北京市通州区供销合作总社OA系统</title>
    <style th:inline="text">
        body {
            font-family: 'Microsoft YaHei';
            margin: 0;

        }

        #login {
            width: 100vw;
            height: 100vh;
            background: linear-gradient(180deg, #d1e6e0, #eef6f3 99%);
            box-shadow: 0px 0px 8px 0px rgba(168, 168, 168, 0.30);
            position: relative;
        }

        .title {
            height: 73px;
            font-size: 42px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: center;
            color: #000000;
            line-height: 59px;
            letter-spacing: 0.07px;
            padding-top: 10vh;
        }

        .content {
            width: 612px;
            height: 350px;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 0px 20px 0px #5c857f;
            position: absolute;
            top: 24vh;
            left: calc(50vw - 306px);
            z-index: 2;
            background: #ffffff url([[@{/y9static/images/tzgxs/contentBg.png}]]) no-repeat left center;
        }

        .contentTitle {
            width: 100%;
            text-align: center;
            height: 33px;
            font-size: 24px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            color: #666666;
            line-height: 33px;
            letter-spacing: 0.02px;
            margin-top: 26px;
            padding-left: 80px;
            box-sizing: border-box;
        }

        .input {
            width: 327px;
            margin: 0 100px 0 180px;
            box-sizing: border-box;
        }

        #username, #password {
            width: 100%;
            height: 46px;
            margin-bottom: 20px;
            box-sizing: border-box;
            padding-left: 40px;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border-radius: 4px;
            color: #6a6f77;
            border: 1px solid #dddddd;
            box-shadow: 0px 0px 5px 0px rgba(213, 213, 213, 0.50);
            background-color: #ffffff !important;
        }

        #username {
            margin-top: 20px;
            background: url([[@{/y9static/images/tzgxs/user.png}]]) no-repeat 16px center;
        }

        #password {
            background: url([[@{/y9static/images/tzgxs/password.png}]]) no-repeat 16px center;
        }

        .btn {
            width: 100%;
            height: 46px;
            margin-bottom: 20px;
            cursor: pointer;
            background-color: #67bf4b;
            line-height: 46px;
            text-align: center;
            color: #ffffff;
            border: 0;
        }

        .bgWrap {
            width: 100vw;
            height: auto;
            position: absolute;
            bottom: 104px;
            left: 0;
            z-index: 0;
        }

        .bgWrap img {
            width: 100vw;
            height: auto;
        }

        .logoWrap {
            width: 100vw;
            height: 134px;
            position: absolute;
            bottom: 26px;
            left: 0;
            text-align: center;
        }

        .logoWrap img {
            width: 156px;
            height: auto;

        }

        body .toolTips {
            width: 285px;
            position: relative;
            top: -140px;
            left: 22px;
            overflow: hidden;
            z-index: 10;
            background: #dfdfdf;
            border-radius: 5px;
        }

        body .toolTips ul {
            width: 285px;
            margin: 0;
            padding: 0;
            max-height: 200px;
            overflow-y: scroll;
            overflow-x: hidden;
            overflow: -moz-scrollbars-none;
            -ms-overflow-style: none;
            /* border: 1px solid #f40; */
        }

        body .toolTips ul::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }

        body .toolTips ul li {
            list-style: none;
            line-height: 30px;
            padding: 0 20px;
            cursor: pointer;
        }

        body .toolTips ul li:hover {
            color: #61BFFF !important;
        }

        body .toolTips ul li.active {
            color: #61BFFF !important;
        }
    </style>
</head>

<body>
<div id="login">
    <div class="title">
        北京市通州区供销合作总社OA系统
    </div>
    <div class="content">
        <div class="contentTitle">用户登录</div>
        <div class="input">
            <form method="post" id="fm1" th:object="${credential}">
                <div class="alert alert-danger" th:if="${#fields.hasErrors('*')}">
                    登录失败：<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
                </div>
                <div class="login_fields__user">
                    <div class="icon"><img alt="" th:src="@{/y9static/y9new/img/user_icon_copy.png}"/></div>
                    <input id="username" placeholder="用户名" type="text" autocomplete="off" value="" oninput="inputOnBlur()"/>
                    <input id="username1" name="username" style="width: 150px;" tabindex="1" autocomplete="false"
                           htmlescape="true" type="hidden"/>
                    <input id="tenantShortName" name="tenantShortName" value="gxs"  style="width: 150px;" autocomplete="false"
                           htmlescape="true" type="hidden"/>
                </div>
                <div class="login_fields__password">
                    <input id="password" tabindex="2" type="password" htmlescape="true" autocomplete="off"
                           placeholder="请输入您的密码"/>
                    <input id="password1" name="password" htmlescape="true" autocomplete="off" type="hidden"/>
                </div>
                <!-- 表单隐藏数据块开始 -->
                <input type="hidden" id="loginType" name="loginType" value="loginName"/>
                <input type="hidden" id="captchaKey" name="captchaKey" value=""/>
                <input type="hidden" id="noLoginScreen" name="noLoginScreen" value="false"/>
                <input type="hidden" id="screenDimension" name="screenDimension" value=""/>
                <input type="hidden" id="pwdEcodeType" name="pwdEcodeType" value=""/>
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/> <input type="hidden" name="geolocation"/>
                <!-- 表单隐藏数据块结束 -->
            </form>
            <!--点选验证码  -->
            <div id="mpanel6"></div>
            <div class="login_fields__submit">
                <input type="button" class="btn" value="登录"/>
            </div>

            <div class="login_fields_remember_password">
                <!-- <input class="chk left" id="checkbox1" type="checkbox"/>
                 <label class="left" for="checkbox1"></label>
                 <span class="left">记住密码</span>-->

                <input id="checkbox1" name="my-checkbox" type="checkbox"/>
                <label for="checkbox1">记住密码</label>
            </div>

            <div class="toolTips" style="display: none">
                <ul id="toolTipsUl"></ul>
            </div>
        </div>
    </div>
    <div class="bgWrap">
        <img th:src="@{/y9static/images/tzgxs/bg.png}" alt="">
    </div>
    <div class="logoWrap">
        <img th:src="@{/y9static/images/tzgxs/logo.png}" alt="">
    </div>
</div>

<!--<link rel="stylesheet" type="text/css" th:href="@{/y9static/y9new/layui/css/layui.css}"/>-->
<script type="text/javascript" th:src="@{/y9static/y9new/js/verify.js}"></script>
<script type="text/javascript" th:src="@{/y9static/y9new/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/y9static/y9new/js/layerMsg.js}" charset="utf-8"></script>
<script type="text/javascript">
    var ctx = "[(${#request.getContextPath()})]";
    var canGetCookie = 1; //是否支持存储Cookie 0 不支持 1 支持
    var ajaxmockjax = 1; //是否启用虚拟Ajax的请求响 0 不启用  1 启用
    var inputTimer = null;
    $(function () {
        validateIE();
        initFormIfRemember();
    });

    function validateIE() {
        try {
            $("#screenDimension").val(window.screen.width + '*' + window.screen.height);
        } catch (e) {
        }
    }

    function initFormIfRemember() {
        if ($.cookie("username") != null) {
            var username = $.cookie("username");
            var password = $.cookie("password");
            username = decode64(username);
            $("#username").val(username);
            //if ($.trim(username).length > 0 && username.indexOf("@") != -1) {
                //$('#username1').val(username.split("@")[0]);
                //$('#tenantShortName').val(username.split("@")[1]);
            //}
            $('#username1').val(username);
            $("#password").val(decode64(password));
            $("#checkbox1").attr("checked", "checked");
        }
    }

    function inputEvent() {
        if (inputTimer) {
            clearTimeout(inputTimer);
        }
        let params = {loginName: $("#username").val()};
        if (!$("#username").val()) {
            $(".toolTips").attr({style: "display: none;"});
            return null;
        }
        inputTimer = setTimeout(() => {
            fetch(ctx + "/api/loginNameAndTenants", {
                method: "POST",
                credentials: "include",
                headers: {
                    "Content-Type":
                        "application/x-www-form-urlencoded;charset=UTF-8",
                },
                body: Object.keys(params).map((key) => {
                    return (encodeURIComponent(key) + "=" + encodeURIComponent(params[key]));
                }).join("&"),
            }).then((response) => {
                return response.json();
            }).then((data) => {
                $("#toolTipsUl").empty();
                $(".toolTips").attr({style: "display: flex;"});
                data.length && data.map((item) => {
                    $("<li></li>", {
                        text: item.loginName,
                        id: item.tenantShortName
                    }).appendTo("#toolTipsUl").on("click", mouseClickEvent);
                });
            });
        }, 250);
    }

    function getTenant() {
        var userName = $('#username').val();
        if ($.trim(userName).length > 0 && userName.indexOf("@") != -1) {
            var tenantName = userName.split("@");
            userName = tenantName[0].split("&");
            $("#username1").val(tenantName[0]);
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {
                    loginName: userName[0],
                    tenantName: tenantName[1]
                },
                url: ctx + '/api/getTenants',
                success: function (res) {
                    if (res.length <= 0) {
                        layer.msg("当前用户不存在或者已禁用!");
                        return;
                    }
                    $('#tenantShortName').val(res[0].tenantShortName);
                }
            });
        }
    }

    function mouseClickEvent() {
        $('#tenantShortName').val(this.id);
        var userName = this.innerText;
        $('#username').val(userName);
        if ($.trim(userName).length > 0 && userName.indexOf("@") != -1) {
            $('#username1').val(userName.split("@")[0]);
        }
        $("#toolTipsUl").empty();
        $(".toolTips").attr({style: "display: none;"});
        $('#password').focus();
    }

    $(document).keydown(function (e) {
        // 上下选择事件
        function shooseItem(value) {
            let activeIndex = null, lisLength = $("#toolTipsUl").children().length;
            lisLength &&
            $("#toolTipsUl li").each(function (index, element) {
                if (this.className.includes("active")) {
                    this.className = "";
                    activeIndex = index;
                    return true;
                }
            });

            if (!lisLength && activeIndex === null) {
                return false;
            }
            if (value === 38 && activeIndex) {
                $("#toolTipsUl").children().eq(activeIndex - 1).addClass("active");
                return true;
            }
            if (value === 38 && !activeIndex) {
                $("#toolTipsUl").children().eq(lisLength - 1).addClass("active");
                return true;
            }
            if (value === 40 && (activeIndex === null || activeIndex + 1 === lisLength)) {
                $("#toolTipsUl").children().eq(0).addClass("active");
                return true;
            }
            if (value === 40 && activeIndex + 1 <= lisLength) {
                $("#toolTipsUl").children().eq(activeIndex + 1).addClass("active");
                return true;
            }
        }

        // 回车键事件
        if (e.which === 13) {
            enterEvent();
        }
        // 上下按键
        if (e.which === 38 || e.which === 40) {
            e.which === 38 && shooseItem(38);
            e.which === 40 && shooseItem(40);
        }
    });

    function enterEvent() {
        let shoseEvent = false;
        $("#toolTipsUl").children().length && $("#toolTipsUl li").each(function (index, element) {
            if (this.className.includes("active")) {
                shoseEvent = true;
                $('#tenantShortName').val(this.id);
                var userName = this.innerText;
                $('#username').val(userName);
                if ($.trim(userName).length > 0 && userName.indexOf("@") != -1) {
                    $('#username1').val(userName.split("@")[0]);
                }
                $("#toolTipsUl").empty();
                $(".toolTips").attr({style: "display: none;"});
                $('#password').focus();
                return true;
            }
        });
        if (!shoseEvent) {
            $('input[type="button"]').click();
        }
    }

    var open = 0;
    layui.use("layer", function () {
        var option = {
            type: "success",
            position: "top-center",
            showicon: true,
            time: 3000,
            title: "登录提示",
            content: "提示",
            shadow: false,
            shadowclickclose: true,
            autoclose: true,
            callback: function (data, obj) {
                obj.ele.close(0);
            },
        };
        //非空验证
        $('input[type="button"]').click(function () {
            var username = $('#username').val();
            var username1 = $('#username1').val();
            var password = $('#password').val();
            var tenantShortName = $("#tenantShortName").val();
            if (username == "") {
                option.type = "warn";
                option.content = "请输入用户名";
                WfMsg(option);
            } else if (password == "") {
                option.type = "warn";
                option.content = "请输入密码";
                WfMsg(option);
            } else {
                $.when(
                    $.ajax({
                        async: false,
                        cache: false,
                        type: "GET",
                        url: ctx + '/api/getRandom',
                        dataType: "json",
                        success: function (y9Result) {
                            if (y9Result.success) {
                                $('#pwdEcodeType').val(y9Result.data);
                            }
                        }
                    })
                ).done(function () {
                    $.ajax({
                        async: false,
                        cache: false,
                        type: "POST",
                        url: ctx + '/api/checkSsoLoginInfo',
                        data: {
                            username: encode64(username1),
                            password: encrypt($('#pwdEcodeType').val(), encode64(password)),
                            tenantShortName: tenantShortName,
                            pwdEcodeType: $('#pwdEcodeType').val()
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.success) {
                                var pwdEcodeType = $('#pwdEcodeType').val();

                                var encodeUserName = encode64(username);
                                var encodeUserName1 = encode64(username1);
                                var encodePassword = encode64(password);
                                var rsapwd = encrypt(pwdEcodeType, encodePassword);
                                $("#username1").val(encodeUserName1);
                                $("#password1").val(rsapwd);

                                if ($("#checkbox1").prop("checked")) {
                                    $.cookie("username", null);
                                    $.cookie("username", encodeUserName, {
                                        expires: 365
                                    });
                                    $.cookie("password", null);
                                    $.cookie("password", encodePassword, {
                                        expires: 365
                                    });
                                } else {
                                    $.cookie("username", null, {
                                        expires: 365
                                    });
                                    $.cookie("password", null, {
                                        expires: 365
                                    });
                                }

                                $("#fm1").submit();
                            } else {
                                var msg = data.msg;
                                if (msg != null && msg.length > 0) {
                                    option.type = "warn";
                                    option.content = msg;
                                    WfMsg(option);
                                }
                            }
                        }
                    })
                }).fail(function () {
                    option.type = "warn";
                    option.content = "获取随机数失败。";
                    WfMsg(option);
                });
            }
        });
    });

    function inputOnBlur(){
        $("#username1").val($("#username").val());
    }
</script>
</body>

</html>